<script>
export default {
  name: 'RightContentView',
  data(){
    return{
        show:false,
      Arr:[
        {"小区管理":""},
        {"帮买取快递废品回收":["门店管理","驿站管理","商品管理","订单管理","废品回收订单"]},
        {"胖虎甄选":["商品管理","订单管理","售后订单"]},
        {"胖虎家政":["家政服务","订单管理","售后订单"]},
        {"用户管理":""},{"骑手管理":""},{"家政管理":""},{"新用户红包":""},{"类目管理":""}
      ],
    }
  },
  methods:{
    showAndHidden(){
      this.show = !this.show;
      this.$emit("menuChange",this.show);
    }
  },
  props: {firstIndex:Number,secondIndex:Number}
}
</script>

<template>
<div :class="{rightContent:true, margin:show}">
  <div class="top">
    <div class="btn" @click="showAndHidden">
      <i v-if="show" class="el-icon-s-fold icon"></i>
      <i v-else="" class="el-icon-s-unfold icon"></i>
    </div>
      <div class="title">
        <a href="###" style="color: #303133;">首页</a>
        <span>&nbsp;/&nbsp;</span>
        <span class="title_name" v-show="firstIndex != 1 && firstIndex != 2 && firstIndex != 3">{{Object.keys(Arr[firstIndex])[0]}}</span>
        <a href="###" v-show="firstIndex == 1 || firstIndex == 2 || firstIndex == 3">{{Object.keys(Arr[firstIndex])[0]}}</a>
        <span class="title_name" v-show="firstIndex == 1 || firstIndex == 2 || firstIndex == 3">&nbsp;/&nbsp;{{Object.values(Arr[firstIndex])[0][secondIndex]}}</span>
      </div>

  </div>
  <div class="bottom">
    <router-view></router-view>
  </div>
</div>
</template>

<style scoped>
.margin{
  margin-left: 64px !important;
}
.rightContent{
  box-sizing: border-box;
  padding-left: 15px;
  height: 1000px;
  margin-left: 230px;
  transition: margin-left 0.5s;
}
@media only screen and (max-width: 1200px){
  .right-content{
    margin-left: 0px;
  }
}
.top{
  height: 60px;
  border-bottom: 5px solid #D8DCE5;
}
.btn{
  width: 30px;
  height: 30px;
  cursor: pointer;
  padding: 15px 15px 15px 0;
  float: left;
}
.btn i{
  font-size: 30px;
}
.title{
  float: left;
  font-size: 20px;
  padding: 15px 10px;
}
</style>